<template>
    <el-table border :data='options' align='center'>
        <el-table-column  align='center' label='充值金额'>
            <template #default='{row}'>
                <template v-if='row.edit'>
                    <el-input size='small' :class='$style.amount' v-model.number='row.amount' />
                </template>
                <template v-else>{{row._amount}}</template>
                <span :class='$style.unit'>元</span>
            </template>
        </el-table-column>
        <el-table-column  align='center' label='售价'>
            <template #default='{row}'>
                <template v-if='row.edit'>
                    <el-input size='small' :class='$style.amount' v-model.number='row.payAmount' />
                    <span :class='$style.unit'>元</span>
                </template>
                <template v-else>
                    <template v-if='row._payAmount !== ""'>
                        {{row._payAmount}}
                        <span :class='$style.unit'>元</span>
                    </template>
                </template>
            </template>
        </el-table-column>
        <el-table-column  align='center' label='操作'>
            <template #default='{row, $index}'>
                <div :class='$style.action'>
                    <template v-if='row.edit'>
                        <XRequestButton :click='async => save($index)'>
                            <el-button type='primary' size='small'>保存</el-button>
                        </XRequestButton>
                        <el-button size='small' @click='cancel($index)'>取消</el-button>
                    </template>
                    <template v-else>
                        <el-button size='small' @click='editOption($index)'>编辑</el-button>
                        <XRequestButton isConfirm confirmText='确定删除该选项吗' :click='async () => deleteOption($index)'>
                            <el-button size='small' type='danger'>删除</el-button>
                        </XRequestButton>
                    </template>
                </div>
            </template>
        </el-table-column>
    </el-table>
</template>

<script lang='ts' setup>
    import { ElMessage } from "element-plus";
    import { reactive } from "vue";
    import { optionsApi, addOptionApi, editOptionApi, deleteOptionApi } from '@/api/recharge'

    const options = reactive<any[]>([])

    function addOption() {
        options.push({
            amount : '',
            payAmount : '',
            _amount : '',
            _payAmount : '',
            id : 0,
            edit : true
        })
    }

    function editOption(index:number) {
        options[index].edit = true
    }

    async function save(index:number) {
        const option = options[index]
        if(option.amount === '') {
            ElMessage.error!('请填写充值金额')
            return
        }

        if(option.amount <= 0) {
            ElMessage.error!('充值金额必须大于0')
            return
        }

        if(option.amount > 999) {
            ElMessage.error!('充值金额不能大于999元')
            return
        }

        if(option.payAmount !== '') {
            if(option.payAmount <= 0) {
                ElMessage.error!('售价必须大于0')
                return
            }

            if(option.payAmount > 999) {
                ElMessage.error!('售价不能大于999元')
                return
            }
        }

        let data:any = {amount : Number(option.amount)}
        if(option.payAmount !== '') {
            data.payAmount = Number(option.payAmount)
        }

        const res = await (option.id ? editOptionApi(option.id, data) : addOptionApi(data))
        console.log(res)
        if(res.success) {
            ElMessage.success('保存成功')
            if(!option.id) {
                option.id = res.data
            }
            option.edit = false
            option._amount = option.amount
            option._payAmount = option.payAmount
        }else {
            ElMessage.error(res.msg)
        }
    }

    async function deleteOption(index:number) {
        const res = await deleteOptionApi(options[index].id)
        if(res.success) {
            ElMessage.success('删除成功')
            options.splice(index, 1)
        }else {
            ElMessage.error(res.msg)
        }
    }

    function cancel(index:number) {
        const option = options[index]
        option.id ? option.edit = false : options.splice(index, 1)
    }


    optionsApi().then(res => {
        if(res.data) {
            res.data.forEach(option => {
                option._amount = option.amount
                option._payAmount = option.payAmount === null ? '' : option.payAmount
                option.edit = false
                options.push(option)
            })
            
        }
    })

</script>

<style lang='scss' module>
    .amount{
        width: 100px;
        text-align: center;
    }

    .unit{
        font-size: 12px;
        font-weight: bold;
        margin-left: 3px;
    }

    .action{
        display: inline-flex;
        gap : 10px;
        margin-left: 15px;
    }
</style>